<template>
	<view class='books-page'>
	<!-- 	<view class="book-tab">
			<view class="book-tab-item" :class="{active:activeTab==='topBook'}" @click='changeTab("topBook")'>
				榜单
			</view>
			<view class="book-tab-item" :class="{active:activeTab==='starBook'}" @click='changeTab("starBook")'>
				书单
			</view>
		</view> -->
			<uni-nav-bar :fixed="true" color="#333333" background-color="#409EFF" :border="false">
					<view class="input-view" @click='tosearch'>
						<uni-icons type="search" size="22" color="#666666" />
						<input  disabled="true" confirm-type="search" class="input" type="text" placeholder="搜索书籍" >
					</view>
			</uni-nav-bar>
		<view class="book-tab-content">
			<TopBook v-if='activeTab==="topBook"'></TopBook>
			<StartBook v-if='activeTab==="starBook"'></StartBook>
		</view>
	</view>
</template>

<script>
	import TopBook from './topBook.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components:{
			TopBook,
			uniIcons,
			uniNavBar
		},
		data() {
			return {
				activeTab:'topBook',
			};
		},
		methods:{
			changeTab(tabName){
				this.activeTab= tabName
			},
			tosearch(e) {
				uni.navigateTo({
					url: '/pages/books/seach/seach',
					animationType:'pop-in',
					animationDuration: 200
				});
			},
			onShareAppMessage(res) {
			    return {
			      title: '一起来阅读吧',
			      path: 'pages/books/book/book'
			    }
			  }
		}
	}
</script>

<style lang="scss">
	.books-page{
		.book-tab{
			display: flex;
			justify-content: space-around;
			background:#05a8ff;
			.book-tab-item{
				text-align: center;
				line-height: 80rpx;
				font-size:32rpx;
				color:#fff;
				width:50%;
				&:first-child{
					border-right: 1px solid #05bdff;
				}
				&.active{
					// color:#007AFF;
					border-bottom: 8rpx solid #007AFF;
					background:#07a0ff;
				}
			}
		}
	}
</style>
